<template>
  <div v-if="isXAxisData"
       class="test-container">
    <!-- 温湿度操作按钮 -->
    <div class="btn-container">
      <div v-show="isOrder"
           @click="setThresholdCli">设置温湿度阈值</div>
      <div @click="getPreviewPdf">温湿度报告下载</div>
      <div v-show="isOrder"
           @click="recordsVisibleCli">设置阈值记录</div>
    </div>
    <!-- 温湿度图表 -->
    <div id="myChartLine"></div>
    <!-- 设置温湿度阈值 -->
    <SetThreshold v-if="visible"
                  :visible="visible"
                  :order-id="orderId"
                  :degree-data="degreeData"
                  :humidity-data="humidityData"
                  @close="visible = false"
                  @refresh="refresh" />
    <!-- 设置温湿度阈值记录 -->
    <Records v-if="recordsVisible"
             :records-visible="recordsVisible"
             :value="value"
             @close="recordsVisible = false" />
    <!-- 节点小地图 -->
    <SmallMap v-show="showMap"
              :point-data="pointData"
              :temperature-icon="temperatureIcon"
              :humidity-icon="humidityIcon"
              @closeMap="showMap = false" />
  </div>
  <div v-else
       class="empty">订单暂无温湿度数据</div>
</template>

<script>
import SetThreshold from "./components/SetThreshold";
import { order, track } from "@/api/index";
import Records from "./components/Records.vue";
import SmallMap from "./components/SmallMap.vue";
import chart from "./mixin/chart";
import option from "./mixin/option";
import { mapState } from "vuex";

export default {
  name: "TemperatureHumidity",
  components: {
    SetThreshold,
    Records,
    SmallMap
  },
  mixins: [chart, option],
  data () {
    return {
      order: order,
      visible: false,
      recordsVisible: false,
      showMap: false,
      value: [],
      pointData: {}
    }
  },
  computed: {
    orderId () {
      return Number(this.$route.query?.orderId)
    },
    customerName () {
      return this.$route.query?.customerName
    },
    pactCode () {
      return this.$route.query?.pactCode
    },
    // 是否为订单进入 typeOrder:1订单/typeOrder:2运单
    isOrder () {
      return this.$route.query?.typeOrder == 1
    },
    // 最高温、湿度 最低温、湿度
    showDownload () {
      return this.degreeData.maxHumidity || this.degreeData.maxTemperature || this.degreeData.minHumidity || this.degreeData.minTemperature
    },
    // x轴不为空
    isXAxisData () {
      return this.xAxisData != [] || this.xAxisData.length
    },
    // 点击节点小地图触发的时间
    ...mapState({
      mapIntervalTime: (state) => state.common.mapIntervalTime
    })
  },
  methods: {
    // 设置开关弹窗
    setThresholdCli () {
      this.visible = true
    },
    // 记录开关弹窗
    recordsVisibleCli () {
      this.recordsVisible = true
      this.records()
    },
    // 设置温湿度后，刷新当前echarts图表
    refresh (data) {
      if (data) {
        // 在重复构建图表时会有缓存问题，此时我们需要清除一下以前构建的图标再重新建立
        // this.myChart.dispose()
        const degreeData = Object.assign(this.degreeData, data)
        const tipList = this._getTipListText(degreeData)
        const newResData = Object.assign({}, this.resData, { degreeData, tipList })
        this._setEcharts(newResData)
      }
      this.visible = false
    },
    // 设置阀值记录
    async records () {
      if (!this.orderId) return
      let type = "humtemper"
      let { code, data } = await track.information(this.orderId, type);
      if (code === 0 && data.length) {
        data.map(item => {
          item.timestamp = item.message.slice(item.message.lastIndexOf('】') + 1)
          item.date = item.message.slice(0, item.message.lastIndexOf('】') + 1)
        })
        this.value = data
      }
    },
    // 报告下载预览
    async getPreviewPdf () {
      let param = {
        customerName: this.customerName,
        pactCode: this.pactCode,
        orderId: this.orderId,
        devCode: this.numericalValue?.deviceCode, // 设备号
        signTime: this.numericalValue?.signTime, // 签收时间
        startTime: this.numericalValue?.startTime, // 开始时间
        humidityUpper: this.degreeData?.maxHumidity, // 湿度上限
        humidityLower: this.degreeData?.minHumidity, // 湿度下限
        temperatureUpper: this.degreeData?.maxTemperature, // 温度上限
        temperatureLower: this.degreeData?.minTemperature // 温度下限
      }
      await order.previewPdf(param).then((res) => {
        this.$message.success(res.data)
      }).catch(() => { })
    },
    // 获取位置列表
    async getPosition (params) {
      let dataIndex = params.dataIndex
      // if (!dataIndex) this.$message('当前节点没有位置信息')
      this.showMap = true
      this.pointData = { loading: true }
      let param = {
        devCode: this.numericalValue?.deviceCode,
        time: params.name
      }
      let { data } = await order.getPosition(param);
      // if (code != 0) return this.$message("暂无位置信息")
      this.pointData = {
        address: data?.address, // 地址
        temperatureData: this.temperatureData[dataIndex], // 温度节点
        humidityData: this.humidityData ? this.humidityData[dataIndex] : "", // 湿度节点
        time: this.xAxisData[dataIndex], // x轴节点
        loading: false,
        point: {
          lat: data?.bLatitude, // 纬度
          lng: data?.bLongitude, // 经度
        },
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.test-container {
  padding: 35px;
  width: 99%;
  height: 96%;
  background: var(--prev-bg-white);
  .btn-container {
    position: absolute;
    top: 7px;
    right: 7%;
    display: flex;
    flex-wrap: wrap;
    width: 253px;
    div {
      width: 120px;
      height: 33px;
      line-height: 33px;
      text-align: center;
      border-radius: 2px;
      background: #ff6622;
      font-size: 14px;
      color: var(--prev-bg-white);
      cursor: pointer;
      z-index: 1;
      margin: 3px;
      // &:last-child {
      //   margin-left: 20px;
      // }
    }
  }
  #myChartLine {
    width: 99%;
    height: 96%;
  }
}
.empty {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-size: 24px;
  color: #666;
}
</style>